<#import '/fed/demo/inc/macros.ftl' as macros />
<@macros.header 'tags'>
</@macros.header>

<#global demos = [
  {
    'n': '随便联想',
    'd': '\'\'',
    's': '宽松联想模式：在未匹配到的联想情况下，表现为输入模式',
    'e': '<form class="form-horizontal" autocomplete="off" novalidate="novalidate">
  <div class="form-group">
    <label class="col-md-2 control-label">频道</label>
    <div class="col-md-10">
    <input id="demo-field" type="text" value="xyz,123,abc" class="form-control" placeholder="#demo-field">
    </div>
  </div>
</form>',
    'c': ['new Tags({
  field: \'#demo-field\',
  maxlength: 10,
  tagMaxlength: 5,
  events: {
    all: function (e) {
      console.log(e.type, e.target.type);
    }
  },
  suggest: {
    url: \'channelList\',
    key: \'channelName\',
    map: [
      {
        // 将channelName转成value，用于模板渲染
        source: \'channelName\',
        target: \'value\'
      }
    ]
  }
});']
  },
  {
    'n': '只许联想',
    'd': '\'\'',
    's': '仅可选择联想值',
    'e': '<form class="form-horizontal" autocomplete="off" novalidate="novalidate">
  <div class="form-group">
    <label class="col-md-2 control-label">频道</label>
    <div class="col-md-10">
    <input id="demo-field2" type="text" value="xyz,123,abc" class="form-control" placeholder="#demo-field">
    </div>
  </div>
</form>',
    'c': ['new Tags({
  field: \'#demo-field2\',
  events: {
    all: function (e) {
      console.log(e.type, e.target.type);
    }
  },
  suggest: {
    url: \'channelList\',
    key: \'channelName\',
    map: [
      {
        // 将channelName转成value，用于模板渲染
        source: \'channelName\',
        target: \'value\'
      }
    ],
    strict: true
  }
});']
  },
  {
    'n': '不可联想',
    'd': '\'\'',
    's': '无联想',
    'e': '<form class="form-horizontal" autocomplete="off" novalidate="novalidate">
  <div class="form-group">
    <label class="col-md-2 control-label">频道</label>
    <div class="col-md-10">
    <input id="demo-field3" type="text" value="xyz,123,abc" class="form-control" placeholder="#demo-field">
    </div>
  </div>
</form>',
    'c': ['new Tags({
  field: \'#demo-field3\',
  events: {
    all: function (e) {
      console.log(e.type, e.target.type);
    }
  }
});']
  }
]>

<@macros.body 'tags' 'tags'>
</@macros.body>

<@macros.footer>
  <script>
    seajs.use(['${appRoot}/common/tags/tags'], function (Tags) {

      $('.demo > button').on('click', function () {
        new Function('Tags', this.nextElementSibling.textContent)(Tags);
      }).trigger('click');
    });
  </script>
</@macros.footer>
